<script lang="ts" setup>
import type { VxeGridListeners, VxeTableGridOptions } from '#/adapter/vxe-table'

import { Page, useVbenModal } from '@vben/common-ui'

import {Button, Input, message, Popconfirm, Space, Switch, Tag} from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import {warehouseDel, warehouseEdit, warehouseList} from '#/api/warehouse'

import popupForm from './popupForm.vue'
import {ref} from "vue";

const formOptions: any = {
  collapsed: true,
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  wrapperClass: 'grid-cols-5',
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'warehouse_code',
      label: '仓库编号',
      operator: 'LIKE',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'warehouse_name',
      label: '仓库名称',
      operator: 'LIKE',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'manage_department',
      label: '管理部门',
      operator: 'LIKE',
    },
    {
      component: 'Select',
      fieldName: 'type',
      label: '类型',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '物料',
            value: '物料',
          },
          {
            label: '成品',
            value: '成品',
          },
        ],
        placeholder: '请选择',
      },
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'area',
      label: '区域',
      operator: 'LIKE',
    },
    {
      component: 'Select',
      fieldName: 'is_allow_negative',
      label: '允许负库存',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        placeholder: '请选择',
      },
    },
    {
      component: 'Select',
      fieldName: 'is_company_house',
      label: '是否公司仓',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        placeholder: '请选择',
      },
    },
    {
      component: 'Select',
      fieldName: 'is_material_warehouse',
      label: '默认物料仓',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        placeholder: '请选择',
      },
    },
    {
      component: 'Select',
      fieldName: 'is_product_warehouse',
      label: '默认成品仓',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        placeholder: '请选择',
      },
    },
    {
      component: 'Select',
      fieldName: 'is_stop',
      label: '停用',
      operator: '=',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        placeholder: '请选择',
      },
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
}
const gridOptions: VxeTableGridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
    trigger: 'row',
  },

  height: 'auto',
  columns: [
    { title: '仓库编号', field: 'warehouse_code', align: 'center' },
    { title: '仓库名称', field: 'code_name', align: 'center' },
    { title: '管理部门', field: 'manage_department', align: 'center' },
    { title: '类型', field: 'type', align: 'center', slots: { default: 'type' } },
    { title: '区域', field: 'area', align: 'center' },
    { title: '备注', field: 'remark', align: 'center' },
    { title: '允许负库存', field: 'is_allow_negative', align: 'center', slots: { default: 'is_allow_negative' } },
    { title: '是否公司仓', field: 'is_company_house', align: 'center', slots: { default: 'is_company_house' } },
    { title: '默认物料仓', field: 'is_material_warehouse', align: 'center', slots: { default: 'is_material_warehouse' } },
    { title: '默认成品仓', field: 'is_product_warehouse', align: 'center',slots: { default: 'is_product_warehouse' } },
    { title: '停用', field: 'is_stop', align: 'center',slots: { default: 'is_stop' } },

    { title: '操作', field: 'action', fixed: 'right', slots: { default: 'action' } },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const search = await gridApi.formApi.getFiltersValues()
        const res = await warehouseList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search:quick_search.value,
          search,
        })
        // 将接口返回的1/0转换为布尔值
        res.list.forEach((row: any) => {
          row.is_allow_negative = row.is_allow_negative === 1
          row.is_company_house = row.is_company_house === 1
          row.is_material_warehouse = row.is_material_warehouse === 1
          row.is_product_warehouse = row.is_product_warehouse === 1
          row.is_stop = row.is_stop === 1
        })
        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },

  id: 'warehouse',
  customConfig: {
    storage: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}

// 双击打开编辑
const gridEvents: VxeGridListeners = {
  cellDblclick: ({ row }) => {
    openEdit(row, 'edit')
  },
}
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
})

function modelClose() {
  gridApi.reload()
}

const [formModal, formModalApi] = useVbenModal({
  connectedComponent: popupForm,
})
// 编辑
function openEdit(res: any, but: any) {
  formModalApi.setData({ rowData: res, view: but }).open()
}

function changeSwitch(data: any, row: any, switchView: any) {
  const params = { [switchView]: data ? 1 : 0, id: row.id }
  warehouseEdit(params).then((res: any) => {
    if (res.data.code === 1) {
      message.success(res.data.msg)
    } else {
      message.error(res.data.msg)
    }
  })
}

function delRow(row: any) {
  warehouseDel({ids:[row.id]}).then((res:any) => {
    if (res.data.code === 1) {
      message.success(res.data.msg)
      gridApi.reload()
    } else {
      message.error(res.data.msg)
    }
  })
}
/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="ID、仓库编号、仓库名称" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
      <template #type="{ row }">
        <Tag color="blue">{{ row.type }}</Tag>
      </template>
      <template #is_allow_negative="{ row }">
        <Switch v-model:checked="row.is_allow_negative" @change="(val) => changeSwitch(val, row, 'is_allow_negative')" />
      </template>
      <template #is_company_house="{ row }">
        <Switch v-model:checked="row.is_company_house" @change="(val) => changeSwitch(val, row, 'is_company_house')" />
      </template>
      <template #is_material_warehouse="{ row }">
        <Switch v-model:checked="row.is_material_warehouse" @change="(val) => changeSwitch(val, row, 'is_material_warehouse')" />
      </template>
      <template #is_product_warehouse="{ row }">
        <Switch v-model:checked="row.is_product_warehouse" @change="(val) => changeSwitch(val, row, 'is_product_warehouse')" />
      </template>
      <template #is_stop="{ row }">
        <Switch v-model:checked="row.is_stop" @change="(val) => changeSwitch(val, row, 'is_stop')" />
      </template>
      <!-- 操作列插槽 -->
      <template #action="{ row }">
        <Space>
          <Button type="primary" size="small" @click="openEdit(row, 'edit')"> 编辑 </Button>
          <Popconfirm title="确定删除选中记录？" ok-text="确认" cancel-text="取消" @confirm="delRow(row)">
            <Button type="primary" size="small" danger> 删除 </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
    <formModal @refresh="modelClose()" />
  </Page>
</template>
<style lang="scss" scoped>
.my-green-btn.ant-btn-primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

.my-yello-btn.ant-btn-primary {
  background-color: #e6a23c;
  border-color: #e6a23c;
}
</style>
